<template>
	<view class="container">
		<!-- 头部区域--搜索框 -->
		<view class="search-bar">
			<view class="search-bar-box">
				<image class="search-span" src="../../static/search.png" />
				<input type="text" placeholder="请输入搜索内容" class="search-text" maxlength="10" 
					@confirm="doSearch" v-model="content"/>
				<button class="search-btn" @click="search">搜索</button>
			</view>
		</view>

		<view class="main">
			<view class="list" v-for="(item,index) in list" :key="index" v-if="this.change === ''">
				<view class="title">{{index}}</view>
				<view class="detail" v-for="(itemson,index2) in item" :key="index2" @click="getVal(itemson)">{{itemson}}</view>
			</view>

			<view class="goods " v-else>
				<view class="goodstop">
					商品列表
				</view>
				<view class="goodsbox2" v-if="good !== []">



					<view class="goodsbox">
						<view class="goodscard" @click="toDetails(index)" v-for="(arr,index) in good" key="index">

							<view class="cardsimg" v-if="arr.urlList.length!==0">
								<image :src="arr.urlList[0]" mode=""></image>
							</view>
							<view class="cardsimg" v-if="arr.urlList.length===0">
								<image
									src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-11-07/15:43:54-fe09117846af4ed4ba97375a2dfc7612.jpg"
									mode=""></image>
							</view>
							<view class="cardstext">
								{{arr.title}}
							</view>
							<view class="price">
								￥{{arr.price}}
							</view>
							<view class="cardsuser">
								{{arr.userName}}
							</view>

						</view>
						<luanqing-empty show="true" text="没有更多数据啦" textColor="#000"></luanqing-empty>

					</view>



				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		apiGetAllCategories,
		apiSearchByContent
	} from '@/utils/request/api.js'
	export default {
		data() {
			return {
				list: [],
				content: '',
				change: '',
				good: [],
				gid: '',
				des: ''
			}
		},
		onLoad() {
			apiGetAllCategories({}).then(res => {
				// console.log(res);
				this.list = res.data
				// this.list = {...this.list}
				console.log(this.list);
			}).catch(err => {
				console.log(err);
			})

		},
		updated() {
			
		},
		methods: {

			doSearch(e) {
				//显示搜索结果
				console.log(e.detail.value);
				this.change = '1'
				apiSearchByContent({
					content: e.detail.value,
					pageNum: 1,
					pageSize: 20
				}).then(res => {
					console.log(res);

					// console.log('111');
					if (res.msg != '查询成功！') {

						this.des = res.msg
						// console.log(this.des);
					} else {
						this.good = res.data
					}


				}).catch(err => {
					console.log(err);
				})
			},
			search($event) {
				this.change = '1'
				apiSearchByContent({
					content: this.content,
					pageNum: 1,
					pageSize: 20
				}).then(res => {
					console.log(res.data);
					this.good = res.data
				}).catch(err => {
					console.log(err);
				})
			},
			message(event) {

				// console.log(event.detail.value)
				this.content = event.detail.value
				// console.log(this.content);
			},
			getVal(e) {
				this.content=e
				console.log(this.content);
			},
			toDetails(index) {
				// console.log(this.allGoods[index].gid);
				this.gid = this.good[index].gid
				// console.log(this.gid);
				uni.navigateTo({
					url: '../details/details?gid=' + this.gid
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f2f2f2;
	}
	.container {
		width: 100%;
		
	}

	.search-bar {
		width: 100%;
		height: 100rpx;
		margin-top: 4%;
	}

	.search-bar-box {
		display: flex;
		margin: 0 auto;
		width: 620rpx;
		height: 70rpx;
		border: 5rpx solid #00a8cc;
		border-radius: 50rpx;
	}

	.search-span {
		width: 15%;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}

	.search-text {
		width: 100%;
		margin-top: 10rpx;
		margin-left: 10rpx;
		font-size: 30rpx;
		color: #7f7f81;
	}

	.search-btn {
		background-color: #00a8cc;
		/* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 35rpx;
		width: 240rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}

	.main {
		box-sizing: border-box;
		padding: 0rpx 0;
	}

	.list {
		margin-top: 30px;
	}

	.title {
		border-left: 10px solid #00a8cc;
		height: 30px;
		line-height: 30px;
		font-size: 20px;
		padding-left: 10px;

	}

	.detail {
		display: inline-block;
		margin-top: 10px;
		width: 20%;
		height: 20px;
		font-size: 16px;
		border-left: 1px solid #ccc;
		padding-left: 5px;
		margin-left: 5px;
	}

	.detail:active {
		background-color: #ccc;
	}

	.goods {
		width: 100%;
		margin-top: 10px;
	}

	.goodstop {
		margin: 10px 0 5px 10px;
	}
	.goodsbox2 {
		width: 98%;
		/* margin-left: 1%; */
	}


	.goodsbox {
		display: grid;
		/* grid-template-columns: repeat(autofill,100px); */
		/* grid-auto-flow: column dense; */
		width: 98%;
		grid-template-columns: 48% 48%;
		grid-gap: 0.9rem;
		height: auto;
		box-sizing: border-box;
		justify-content:center;

	}

	.goodscard {
		display: inline-block;
		/* width: 47%; */
		/* width: 43vw; */
		/* height: 220px; */

		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 3%;
	}

	.goodscard:nth-child(2n) {
		/* width: 9%; */
		/* margin-left: 5%; */
	}

	.cardsimg {
		/* width: 100%; */
		/* height: 80px; */
		/* margin: 10px; */

	}

	.cardsimg image {
		width: 100%;

		border-radius: 10px;
	}

	/* 要改!!! */
	.cardstext {
		width: 100%;
		height: 20px;
		overflow: hidden;
		margin-top: 5px;
		margin-bottom: 5px;
		padding: 3px;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.cardsuser {
		display: inline-block;
		float: right;
		width: 50%;
		height: 15px;
		margin-left: 5px;
		font-size: 10px;
		color: #b4b1ba;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;

	}

	.price {
		display: inline-block;
		width: 40%;
		height: 20px;
		color: rgb(255, 85, 0);
		font-size: 16px;
		margin-left: 5px;
		/* margin-top: 5px;s */
		white-space: nowarp;
		/*强制在一行显示*/
		overflow: hidden;
		/*溢出隐藏*/
		text-overflow: ellipsip;
		/*溢出显示省略号*/
	}
</style>
